<template>
	<view class="cu-card article no-card">
		<view class="cu-item shadow">
			<view class="title" :class="detail.title ? '' : 'noTitle'">
				<view class="text-cut">{{ detail.title }}</view>
				<view class="text-number">
					<text>{{ 1 }}</text>
				</view>
			</view>
			<view class="content">
				<!-- 					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
							 mode="aspectFill"></image> -->
				<view class="desc">
					<view class="text-content">{{ detail.summary }}</view>
					<view>
						<!-- TODO::评论的点赞数大于99，即神评论 -->
						<view v-if="detail.commentPraiseCount > 99" class="cu-tag bg-red light sm round">有神评</view>
						<view class="cu-tag bg-green light sm round">史诗</view>
					</view>
				</view>
			</view>
			<view class="comment">
				<view class="text-gray text-df">
					<text class="cuIcon-attentionfill margin-left margin-right-xs"></text> {{detail.watchCount}}
					<text class="cuIcon-appreciatefill margin-left margin-right-xs"></text> {{detail.praiseCount}}
					<text class="cuIcon-messagefill margin-left margin-right-xs"></text> {{detail.commentCount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		detail:{
			type: Object,
		}
	},
	data() {
		return {};
	},

};
</script>

<style lang="less" scoped>
	.text-number{
		width: 40rpx;
		height: 40rpx;
		// background-color: #1cbbb4;
		background-color: #e03997;
		border-radius: 50%;
		text{
			font-size: 28rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.noTitle{
		height: 30rpx;
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.text-content{
		margin-bottom: 10rpx;
		overflow: unset !important;
	}
	.comment{
		margin-top: 20rpx;
		margin-right: 30rpx;
		display: flex;
		flex-direction: row-reverse;
	}
	/deep/ .cu-tag,.sm{
		padding: 20rpx 14rpx;
	}
</style>
